import react, { useRef, useState } from 'react'


export const PureReactCounterComponent = () => {
    const [result, setResult] = useState(0)
    const selectRef = useRef()

    const onIncreacementBtnClicked = () => {
        const { value: step } = selectRef.current
        setResult(result + Number(step))
    }
    const onSubtractionBtnClicked = () => {
        const { value: step } = selectRef.current
        setResult(result - Number(step))
    }
    const onIncreaceIfEvenBtnClicked = () => {
        const { value: step } = selectRef.current
        if (!(result % 2)) {
            setResult(result + Number(step))
        }

    }
    const onAsyncIncreacementBtnClicked = () => {
        const { value: step } = selectRef.current
        setTimeout(() => {
            setResult(result + Number(step))
        }, 1500)
    }

    return (
        <>
            <h3>当前和为：{result}</h3>
            <select ref={selectRef}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>&nbsp;
            <button onClick={onIncreacementBtnClicked}>加！</button>&nbsp;
            <button onClick={onSubtractionBtnClicked}>减！</button>&nbsp;
            <button onClick={onIncreaceIfEvenBtnClicked}>偶数再加！</button>&nbsp;
            <button onClick={onAsyncIncreacementBtnClicked}>等会儿加！</button>
        </>
    )
}